<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      @close="sendVisible"
      width="30%"
      :modal-append-to-body="false"
    >
      <div v-if="active===0">
        <el-form ref="userInfo" :model="userInfo" :rules="rules">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="userInfo.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phoneNumber">
            <el-input v-model="userInfo.phoneNumber" placeholder="请输入手机号"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-else-if="active===1">
        <el-form ref="password" :model="password" :rules="rules">
          <el-form-item label="新密码" prop="new_password">
            <el-input v-model="password.new_password" show-password placeholder="请输入新密码"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="current_password">
            <el-input v-model="password.current_password" show-password placeholder="请再次输入新密码"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div v-else>
        <el-result icon="success" title="修改成功" subTitle="请返回首页进行登录">
          <template slot="extra">
            <el-button type="primary" @click="backtoindex">返回</el-button>
          </template>
        </el-result>
      </div>
      <div class="el_step_sty">
        <el-button v-if="active===0" class="el_step_button" type="primary" @click="confirmUser('userInfo')">下一步</el-button>
        <el-button v-else-if="active===1" class="el_step_button" type="primary" @click="confirmPassword('password')">修改密码</el-button>
        <el-steps :active="active" finish-status="success" align-center>
          <el-step title="用户信息"></el-step>
          <el-step title="修改密码"></el-step>
          <el-step title="返回首页"></el-step>
        </el-steps>
      </div>
    </el-dialog>
  </div>
</template>

<script>
 import router from "../router";

 export default {
   props:['forgetDialog'],
    data() {
     let validateInput = (rule, value, callback)=>{
       if (!value){
         return callback(new Error('输入不能为空'))
       }else {
         callback()
       }
     };
     let validatePassword = (rule, value, callback) =>{
       if (value !== this.password.new_password){
         return callback(new Error('两次输入密码不一致'))
       }else {
         callback()
       }
     };
      return {
        active: 0,
        dialogVisible:false,
        userInfo:{
          username:'',
          phoneNumber:'',
        },
        password:{
          id:'',
          new_password:'',
          current_password:'',
        },
        rules:{
          username:[{
            validator:validateInput,require:true,message:'请输入用户名',tigger:'blue'
          }],
          phoneNumber:[{
            validator:validateInput,require:true,message:'请输入手机号',tigger:'blue'
          }],
          new_password:[{
            validator:validateInput,require:true,message:'请输入新密码',tigger:'blue'
          }],
          current_password: [{
            validator:validatePassword,require:true,message:'两次输入密码不一致',tigger:'blue'
          }]
        }
      };
    },
   watch: {
     forgetDialog(newValue){
       if (newValue === true) {
         this.dialogVisible = true
       }
     }
   },
    methods: {
     // 确认用户存在于用户库中
      confirmUser(formName) {
        this.$refs[formName].validate((valid)=>{
          if (valid) {
            this.$axios.get('api/user/info/',{
              params:{username:this.userInfo.username,phone_number:this.userInfo.phoneNumber}
            }).then((response)=>{
              const  res = response.data
              if (res['respCode']==='000000'){
                if (res['list'][0]) {
                  this.password.id = eval(res['list'][0])['id']
                  this.active++
                }else {
                  this.$message.error('用户不存在')
                }
              }else {
                this.$message.error(res['respMsg'])
              }
            })
          }else {
            return false
          }
        })
      },
      // 修改指定用户密码
      confirmPassword(formName) {
        this.$refs[formName].validate((valid)=>{
          if (valid) {
            this.$axios.post('api/password/edit/',{
              form:this.password
            }).then((response)=>{
              const  res = response.data
              if (res['respCode']==='000000'){
                this.active++
              }else {
                this.$message.error(res['respMsg'])
              }
            })
          }else {
            return false
          }
        })
      },
      backtoindex() {
        this.$emit('getForgetDialog','false')
        location.reload()
      },
      sendVisible() {
        this.$emit('getForgetDialog','false')
        location.reload()
      },
    },
  }
</script>

<style scoped>
.el_step_sty {
  line-height: 20px;
}
.el_step_button {
  margin: 20px 20px 20px 0;
  width: 100%;
}
</style>
